import {
  GridComponent,
  MarkLineComponent,
  TitleComponent,
  TooltipComponent,
} from "echarts/components";
import { LabelLayout, UniversalTransition } from "echarts/features";
import React, { useEffect, useRef } from "react";
import { graphic, init, use } from "echarts/core";

import { CanvasRenderer } from "echarts/renderers";
import { LineChart } from "echarts/charts";
import styled from "styled-components";

const Wrapper = styled.div`
  width: 100%;
`;

const ChartWrapper = styled.div`
  padding: 10px !important;
  width: 100%;
  height: 300px;
  box-sizing: border-box;
`;

const About = () => {
  const chartContainer = useRef();
  const eChartsInstance = useRef();

  const option = {
    title: {
      text: "ECharts 入门示例",
    },
    tooltip: {},
    xAxis: {
      data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    },
    yAxis: {},
    series: [
      {
        name: "销量",
        type: "line",
        data: [5, 20, 36, 10, 10, 20, 22],
      },
    ],
  };

  useEffect(() => {
    use([
      GridComponent,
      LineChart,
      LabelLayout,
      UniversalTransition,
      CanvasRenderer,
      MarkLineComponent,
      TitleComponent,
      TooltipComponent,
    ]);

    if (chartContainer.current) {
      eChartsInstance.current = init(chartContainer.current);
      eChartsInstance.current.setOption(option);
    }
  }, []);

  return (
    <Wrapper>
      <ChartWrapper ref={chartContainer} />
    </Wrapper>
  );
};

export default About;
